<template>
	<view>
		<view class="app">
			<!-- 自定义导航栏 -->
			<view class="custom-nav">
				<image class="user-avatar" v-if="router == 'pages/index/index2'" @click="gotoIndexOfUser"
               src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/tongren_avatar.png"
               mode="aspectFill"></image>
			   <image v-if="router == 'pages/index/index'" class="index-icon" src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/index_icon.png"></image>
				<!-- <image v-if="router == 'pages/index/index'" class="user-avatar2" src="/static/index.png" @click="gotoIndexOfUser"></image>
				<image mode="widthFix" src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/wechat_title.png" class="nav-icon"></image> -->
			</view>
			<!-- 页面内容 -->
			<router-view class="page-content"></router-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			router: {
				type: String,
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			gotoIndexOfUser() {
				if (this.router == 'pages/index/index') {
					// 当前页为购买页则跳转首页（tabBar页面）
					this.$tools.routerTo('/pages/index/index2', 'switchTab', 'none')
				} else if (this.router == 'pages/index/index2') {
					// 当前页为首页则跳转我的页面（tabBar页面）
					this.$tools.routerTo('/pages/index/mine', 'switchTab', 'none')
				}
			}
		},
	}
</script>

<style>
.custom-nav {
  height: 64px; /* 包含状态栏高度 */
  display: flex; /* 使用flex布局排列元素 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中标题图标 */
  background-color: transparent; /* 背景透明 */
  position: fixed;
  top: 60rpx;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0rpx 30rpx; /* 左右内边距 */
}

/* 用户头像样式 */
.user-avatar {
  width: 100rpx; /* 头像宽度 */
  height: 100rpx; /* 头像高度 */
  border-radius: 50%; /* 圆形头像 */
  /* 白色边框 */
  border: 2rpx solid rgba(255,255,255,0.8);
  position: absolute; /* 绝对定位 */
  left: 30rpx; /* 左对齐，与容器内边距一致 */
}

/* 标题图标样式 */
.nav-icon {
  width: 240rpx;
  /* 移除margin: 0 auto; 因为flex容器已设置居中 */
}

.page-content {
  padding-top: 64px;
}

.index-icon {
	height: 60rpx;
	width: 350rpx;
	position: fixed;
  	top: 50rpx;
  	left: 60rpx;
  	right: 0;
}
</style>
